<template>
	<layout>
		<view class="container">
			<view class="example">
				<!-- 展示不同的排列方式 -->
				<uni-forms ref="baseForm" :rules="rules" v-model="baseFormData" label-position="left"
					label-width="200rpx">
					<uni-forms-item label="打卡类型" required name="cardType">
						<uni-data-select v-model="baseFormData.cardType" :localdata="cardTypes"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="缺卡日期" required name="cardDate">
						<uni-datetime-picker type="date" v-model="baseFormData.cardDate" />
					</uni-forms-item>
					<uni-forms-item label="缺卡原因" name="remark">
						<uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="请输入缺卡原因" />
					</uni-forms-item>
					<uni-forms-item label="附件" name="attachList">
						<uni-file-picker v-model="baseFormData.attachList" @select="select"
							file-mediatype="image"></uni-file-picker>
					</uni-forms-item>
				</uni-forms>
				<button type="primary" class="bg-blue" @click="submit('baseForm')">提交</button>
			</view>
		</view>
	</layout>
</template>

<script>
	import {
		addcardApply,
		uploadImg,
		getClockRuleList,
	} from '@/api/system/user.js'

	import {
		getToken
	} from '../../../utils/auth';
	import layout from '../../common/layout/layout.vue';
	export default {
		components: {
			layout
		},
		data() {
			return {
				// 基础表单数据
				baseFormData: {
					cardType: '',
					cardDate: '',
					endTime: '',
					leaveDay: '',
					remark: '',
					attachList: []
				},
				cardTypes: [
				],
				// 校验规则
				rules: {
					leaveType: {
						rules: [{
							required: true,
							errorMessage: '请假类型不能为空'
						}]
					},
					startTime: {
						rules: [{
							required: true,
							errorMessage: '请假开始时间不能为空'
						}]
					},
					endTime: {
						rules: [{
							required: true,
							errorMessage: '请假结束时间不能为空'
						}]
					},
				},
				attachList: []
			}
		},
		computed: {

		},
		watch: {

		},
		onLoad() {
			this.getClockRuleList();
		},
		onReady() {},
		methods: {
			getClockRuleList() {
				getClockRuleList()
					.then(data => {
						this.cardTypes = (data.rows || []).map(c => {
							c.text = c.ruleName;
							c.value = c.id;
							return c;
						})
					})
			},
			submit(ref) {
				wx.showLoading({
				  title: '加载中',
				})
				return
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					addcardApply({
							studentId: (this.$store.state?.user?.studentInfo || {}).studentId,
							...res,
							attachList: this.attachList,
						})
						.then(data => {
							uni.showToast({
								title: '补卡发起成功'
							})
							wx.hideLoading()
							setTimeout(() => {
								this.$tab.navigateTo('/pages/reissueCard/reissueCardRecord/index')
							}, 300)
						})
						.catch(data => {
							uni.showToast({
								title: data
							})
						})
				}).catch(err => {
					console.log('err', err);
				})
			},
			calcLeaveTimeout(start, end) {
				// 将输入的日期字符串转换为Date对象
				const startDate = new Date(start);
				const endDate = new Date(end);

				const timeDiff = endDate - startDate;
				const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

				return daysDiff + 1;
			},
			// 上传成功
			success(e) {
				console.log(e)
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			select(e) {
				console.log('选择文件：', e)
				const {
					tempFilePaths,
					tempFiles
				} = e;
				console.log(e)
				const _data = {
					name: 'file',
					filePath: tempFilePaths[0]
				}
				uploadImg(_data).then(response => {
					console.log(response)
					this.attachList.push({
						fileName: response.newFileName,
						filePath: response.url,
					})
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.example {
		padding: 15px;
		height: 100vh;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.leave-timeout {
		height: 100%;
		display: flex;
		align-items: center;
	}
</style>